<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>归档页面</title>
	</head>
	<body>
	<!--导航-->
	<nav th:replace="_fragments :: menu(4)">

	</nav>
		<!--中间内容--->
		<div class="m-padded-tb-big m-container-small">
         <div class="ui container">
         	<!----header--->
					<div class="ui top attached padded segment">
						<div class="ui middle aligned two column grid">
							<div class="column">
								<h3 class="ui teal header">归档</h3>
							</div>
							<div class=" right aligned column">
								共<h2 class="ui orange header m-inline-block m-text-thin"> 14 </h2>篇博客
							</div>
						</div>
					</div>
            <h3 class="ui center aligned header">2017</h3>
            <div class="ui fluid vertical menu">
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            </div>
        <h3 class="ui center aligned header">2016</h3>
            <div class="ui fluid vertical menu">
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            </div>
        <h3 class="ui center aligned header">2015</h3>
            <div class="ui fluid vertical menu">
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            	<a class="item" target="_blank" href="#">
            		<span><i class="mini teal circle icon"></i>关于可以联系清单
            		<div class="ui teal basic left pointing label m-padded-mini">9月3日</div>
            		</span>
            	<div class="ui orange basic left pointing label m-padded-mini">
            		原创
            	</div>
            	</a>
            </div>
        
         </div>
		</div>
		<!--底部footer--->
	<footer th:replace="_fragments :: footer" >

	</footer>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
		<script type="text/javascript">
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
		</script>
	</body>
</html>
